<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条5</title>
    <style>
        *{ margin:0; padding:0;}
        .loading{width: 100%; height: 100%; position: fixed; top:0; left: 0; z-index: 100; background-color: #fff;}
        .loading .pic{width: 100px; height: 100px; position: absolute; top:0; bottom: 0; left:0; right:0; margin: auto; font-size: 30px; text-align: center; line-height: 100px;}
        .loading .pic span{display: block; width: 80px; height: 80px; position: absolute; top:10px; left:10px; border-radius: 50%; box-shadow: 0 3px 0 #666; -webkit-animation: rotate 1s infinite linear; animation: rotate 1s infinite linear;}

        @-webkit-keyframes rotate {
            0%{-webkit-transform: rotate(0deg);}
            100%{-webkit-transform: rotate(360deg);}
        }
        @keyframes rotate {
            0%{transform: rotate(0deg);}
            100%{transform: rotate(360deg);}
        }
    </style>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        $(function () {
            var img = $("img");
            var num = 0;
            img.each(function (i) {
                var oImg = new Image();
                
                oImg.onload=function () {
//                    oImg.onload = null;
                    num++;
                    $(".loading b").html(parseInt(num/$("img").size()*100)+"%");
                    if(num==img.length){
//                        $(".loading").fadeOut();
                    }
                }
                
                oImg.src=img[i].src;
            })
        })
    </script>
</head>
<body>
<div class="loading">
    <div class="pic">
        <span></span>
        <b>0%</b>
    </div>
</div>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511943907189&di=e5d7a0fac81deee621476c0caf6c77e2&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fd043ad4bd11373f07e4db35ead0f4bfbfaed0485.jpg" alt="">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511943907188&di=52c036116a09a38bc58ae8db0bc91fb8&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fcc11728b4710b912b171853ecafdfc03934522b9.jpg" alt="">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511943907188&di=cff0d9ae5339750315f6f0b76e4d8755&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F5882b2b7d0a20cf4db0ab51f7f094b36adaf995c.jpg" alt="">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511943907187&di=65c2626c3973ffe6e93cd3d2e58f425c&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F6609c93d70cf3bc76007402dd800baa1cc112ae8.jpg" alt="">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511943907367&di=2d526d2b89fd08df7523d6df74f37222&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fcc11728b4710b9128942bd3ecafdfc039345226a.jpg" alt="">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511950090104&di=a2a873a85a13506dbb6f451bf50287bb&imgtype=jpg&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D2432960747%2C1825653824%26fm%3D214%26gp%3D0.jpg" alt="">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511950167216&di=3cf6e4c1cfa94e46badca54ebb1aa09d&imgtype=0&src=http%3A%2F%2Fif.topit.me%2Ff%2F16%2Fe6%2F1194980072c1ce616fo.jpg" alt="">
    <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1913688507,1105491711&fm=11&gp=0.jpg" alt="">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511950507867&di=fb9b9c47154babafea27c9254d2f04fc&imgtype=0&src=http%3A%2F%2Fpic65.nipic.com%2Ffile%2F20150428%2F12641788_080729758000_2.png" alt="">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511950581480&di=4898f3ea5d31b75e6ba91aea5fefb9cb&imgtype=0&src=http%3A%2F%2Fpic68.nipic.com%2Ffile%2F20150526%2F21011915_230134210000_2.jpg" alt="">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511950581479&di=aeb694c271067f1f5ab9f558414e474a&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F54fbb2fb43166d2243b1069a402309f79152d2fd.jpg" alt="">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511950581477&di=2aa9175c63bb984fe5f614c7748cdb7b&imgtype=0&src=http%3A%2F%2Fpic72.nipic.com%2Ffile%2F20150716%2F21422793_144600530000_2.jpg" alt="">
</body>
</html>